<html lang="zh">

<head>

  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,maximum-scale=1.0,minimum-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>国庆红旗头像 - 字节智造www.zsxcool.com</title>
    <style>
      a:link {
        color: #fff;
        text-decoration: none;
      }

      a:visited {
        color: #fff;
      }

      #export {
        display: none;
        margin: 0 auto;
        width: 250px;
        height: 250px;
        margin-top: 50px;
        margin-bottom: 50px
      }

      .operation-btns .o-btn1 {
        background-size: 11.6rem 4.325rem
      }

      .operation-btns .o-btn2 {
        background-size: 11.6rem 3.75rem
      }

      center {
        color: #fff;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="css/strap.min.css">
  </head>

<body>
  <div class="wrapper">
    <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
    <div class="operation-header">
      <div class="h-title">

      </div>
    </div>
    <div class="operation-box">
      <a class="prev" onClick='changeHat()'></a>
      <div class="operation-img">
        <div class="cropper-content" id="content">
          <canvas class="" id='cvs'></canvas>
        </div>
      </div>
      <a class="next" onClick='changeHat()'></a>
    </div>
    <img id='export' alt='国庆专属头像' src='' />
    <div class="operation-btns">
      <a class="o-btn1">
        <input class="o-btn1" id='upload' type='file' onchange='viewer()' style='opacity: 0;'>
      </a>
      <a class="o-btn2" onClick='exportFunc()' style="display: none;">
      </a>
    </div>

    <div class="operation-done">
      <img src="img/act-done-happy.png" alt="" class="act-done-happy">
    </div>
    <center>
      <a href="https://www.zsxcool.com/" target="_blank">
      </a>
    </center>
  </div>
  <div style='display: none'>
    <img id='img' src='' alt='' />
    <img class='hide' id='hat0' src='img/hat7.png' />
    <img class='hide' id='hat1' src='img/hat0.png' />
    <img class='hide' id='hat2' src='img/hat2.png' />
    <img class='hide' id='hat3' src='img/hat3.png' />
    <img class='hide' id='hat4' src='img/hat1.png' />
    <img class='hide' id='hat5' src='img/hat4.png' />
    <img class='hide' id='hat6' src='img/hat5.png' />
    <img class='hide' id='hat7' src='img/hat6.png' />
  </div>
  <script src="js/fabric.min.js"></script>
  <script>
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var exportImage = document.getElementById("export");
    var img = document.getElementById("img");
    var hat = "hat0";
    var canvasFabric;
    var hatInstance;
    //var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
    var screenWidth = document.getElementById("content").scrollHeight;
    function viewer() {
      var file = document.getElementById("upload").files[0];
      console.log(file);
      var reader = new FileReader;
      if (file) {
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          img.src = reader.result;
          img.onload = function () {
            img2Cvs(img)
          }
        }
      } else {
        img.src = ""
      }
    }
    function img2Cvs(img) {
      cvs.width = img.width;
      cvs.height = img.height;
      cvs.style.display = "block";
      canvasFabric = new fabric.Canvas("cvs", {
        width: screenWidth,
        height: screenWidth,
        backgroundImage: new fabric.Image(img, {
          scaleX: screenWidth / img.width,
          scaleY: screenWidth / img.height
        })
      });
      changeHat();

      document.getElementsByClassName("o-btn1")[0].style.display = "none";
      document.getElementsByClassName("o-btn2")[0].style.display = "block";
      //document.getElementById("tip").style.opacity = 1
    }
    function changeHat() {
      document.getElementById(hat).style.display = "none";
      var hats = document.getElementsByClassName("hide");
      hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
      var hatImage = document.getElementById(hat);
      hatImage.style.display = "block";
      if (hatInstance) {
        canvasFabric.remove(hatInstance)
      }
      console.log(hatImage.width);
      console.log(100 / hatImage.width);
      hatInstance = new fabric.Image(hatImage, {
        top: 0,
        left: 0,
        scaleX: screenWidth / hatImage.width,
        scaleY: screenWidth / hatImage.height,
        cornerColor: "#0b3a42",
        cornerStrokeColor: "#fff",
        cornerStyle: "circle",
        transparentCorners: false,
        rotatingPointOffset: 30
      });
      hatInstance.setControlVisible("bl", false);
      hatInstance.setControlVisible("tr", false);
      hatInstance.setControlVisible("tl", false);
      hatInstance.setControlVisible("mr", false);
      hatInstance.setControlVisible("mt", false);
      canvasFabric.add(hatInstance)
    }
    function exportFunc() {
      document.getElementsByClassName("operation-box")[0].style.display = "none";
      document.getElementsByClassName("operation-btns")[0].style.display = "none";

      // document.getElementById("exportBtn").style.display = "none";
      // document.getElementById("tip").innerHTML = "长按图片保存或分享";
      // document.getElementById("change").style.display = "none";
      cvs.style.display = "none";
      exportImage.style.display = "block";
      exportImage.src = canvasFabric.toDataURL({
        width: screenWidth,
        height: screenWidth
      });
      alert('长按图片保存或分享');
    }
  </script>
</body>

</html>